<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="活动设置" name="first">
        <el-row>
          <div class="limits">
            <el-row v-if="form.is_free==0">
              <el-col :span="18">
                <el-alert title="提示：本功能为付费项目，开通本功能前请仔细阅读功能说明及费用说明。" type="warning" show-icon>
                </el-alert>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="2"><span class="title">活动进度</span></el-col>
              <el-col :span="14">
                <el-steps :active="form.status==0?3:4" space="112px" align-center finish-status="success">
                  <el-step title="未申请"></el-step>
                  <el-step title="审核中"></el-step>
                  <el-step title="待开启"></el-step>
                  <el-step title="已上线"></el-step>
                </el-steps>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="line"></div>
              </el-col>
            </el-row>
          </div>
          <el-form ref="form" :model="form" :disabled="!checkPermission(['trylearnOperate'])" label-position="left"
            label-width="100px">
            <!-- <el-form-item label="功能状态">
             <el-steps :active="form.status==0?3:4" space="112px" finish-status="success">
               <el-step title="未申请"></el-step>
               <el-step title="审核中"></el-step>
               <el-step title="待开启"></el-step>
               <el-step title="已上线"></el-step>
             </el-steps>
            </el-form-item> -->
            <el-form-item label="时间限制">
              <el-col>
                <el-input v-model="form.class_hours" style="width: 200px;" :disabled=" form.status==1"></el-input>
                <span class="ml_10">学时</span><span>*0表示不限制</span>
              </el-col>
            </el-form-item>
            <el-form-item label="支持场地">
              <el-col>
                <el-transfer filterable :titles="['场地', '已选']" :filter-method="filterMethod" filter-placeholder="请输入关键字搜索"
                  v-model="form.train_place" :data="data" :props="{key: 'id',label: 'title'}">
                </el-transfer>
              </el-col>
            </el-form-item>
            <el-col>
              <el-form-item>
                <el-button type="primary" class="submitBtn" @click="submitRuler">
                  <span v-if="form.status==0">立即开启</span>
                  <span v-if="form.status==1">下线</span>
                </el-button>
                <el-button @click="resetForm" :disabled=" form.status==1">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="试学记录" name="second" v-if="checkPermission(['trylearnHistory'])">
        <!-- 表格 -->
        <studenttablehead :tabData='listData' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'
          v-if="issuccess">

          <el-table-column prop="status" label="报名状态" align="center">
          </el-table-column>
          <el-table-column prop="sub_time" label="预约时间" align="center">
          </el-table-column>
          <el-table-column prop="title" label="预约场地" align="center">
          </el-table-column>
          <el-table-column prop="state" label="试学状态" align="center">
          </el-table-column>
        </studenttablehead>
      </el-tab-pane>
    </el-tabs>
    <div class="backBtn" @click="backActivity"><img src="../../../assets/schooladmin/back.png" alt=""></div>
  </div>
</template>

<script>
  //成绩弹窗
  import recordinfo from './component/enteringdialog'
  //录入弹窗
  import enteringdialog from './component/enteringdialog'
  //提示组件
  import warn from '@/components/warn/warn'
  //按钮权限验证
  import checkPermission from "@/utils/permission";
  //学员表格
  import studenttablehead from '@/components/studenthead'
  //api
  import {
    studentList,
    coupontryfreeconfig,
    coupontryfreeconfigPut,
    coupontryFreeList
  } from '@/api/student'
  import {
    getSessionStorage
  } from '@/utils/accessToken'
  export default {
    data() {
      return {
        //tabs切换
        //页码
        page: 1,
        //翻页总数
        total: 10,
        //是否显示录入弹窗
        isshowenter: false,
        //弹窗参数
        //是否显示成绩弹窗
        isshowrecord: false,
        dialogparams: {},
        //是否显示学员信息弹窗
        isshowStudent: false,
        issuccess: false,
        activeName: 'first',
        form: {
          train_place: [],
          class_hours: 0,
          status:0
        },
        data: [],
        value: [],
        //列表数据
        listData: {},
        infoData: {},

      }
    },
    methods: {
      //权限
      //关闭录入弹窗
      closeenter() {
        this.isshowenter = false
      },
      checkPermission,
      //成绩录入成功
      confirm() {
        this.isshowenter = false
        //刷新列表
        this.getlistData()
      },
      //tabs切换
      handleClick(tab, event) {
        this.page = 1
        this.total = 10
        if (tab.name == 'first') {
          this.getcoupontryfreeconfig()
        } else {
          //获取领取记录
          this.getlistData(this.readId)
        }
      },
      backActivity() {
        this.$router.go(-1); //返回上一层
      },
      filterMethod(query, item) {
        return item.title.indexOf(query) > -1;
      },
      //翻页 一页有多少条数据
      handleSizeChange(val) {
        this.total = val
        //获取数据
        this.getlistData()
      },
      //翻页码
      handleCurrentChange(val) {
        this.page = val
        //获取数据
        this.getlistData()
      },
      //获取配置详情
      async getcoupontryfreeconfig() {
        let data = await coupontryfreeconfig()
        if (data.data) {
          this.infoData = data.data
        }
        this.form.class_hours = data.data.class_hours ? data.data.class_hours: 0
        this.form.status = data.data.status ? data.data.status: 0
        this.form.train_place =  data.data.train_place!=''?data.data.train_place.split(',').map(Number):[]
        if( this.form.status ==1){
          this.data.map(p=>{
            p.disabled=true
          })
        }else{
            this.data = getSessionStorage('Optionsall')['train']
        }
      },
      //获取成绩列表
      async getlistData() {
        let params = {
          page: this.page,
          rows: this.total,
        }
        let data = await coupontryFreeList(params)
        if (data.code == '0000') {
          this.listData = data.data
          this.issuccess = true
        }
        console.log(this.listData)
      },
      //提交
      async submitRuler() {

        let params = {
          status: this.form.status == 0 ? 1 : 0,
          class_hours: this.form.class_hours,
          train_place: this.form.train_place.join(','),
        }
        let data = await coupontryfreeconfigPut(params)
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: data.msg
          });
        }
        this.getcoupontryfreeconfig()

      },

      //重置
      async resetForm() {
        this.getcoupontryfreeconfig()
      },

    },
    components: {
      studenttablehead,
      recordinfo,
      enteringdialog
    },
    mounted() {
      this.data = getSessionStorage('Optionsall')['train']
      this.readId = this.$route.query.id
      this.getcoupontryfreeconfig()

    }
  }
</script>

<style scoped lang="scss">
  ::v-deep {

    .el-step__head.is-success {
      border-color: #3388FF;
      color: #fff;

      .el-step__icon {
        background-color: #3388FF;
        color: #fff;
      }
    }

    .el-form {
      margin-left: 60px;
      margin-top: 40px;
    }

    .el-step__title.is-success {
      color: #323233
    }

    .el-step__head.is-process {
      color: #c0c4cc;
      border-color: #c0c4cc;

    }

    .el-step__title {
      font-size: 14px;
      color: #323233;
    }

    .el-form-item__label {
      font-size: 16px;
      font-weight: bold;
    }

    .el-step__title.is-process {
      font-weight: normal;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }

    .el-tabs__header {
      left: 55px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: bold;
    }

    .el-transfer-panel {
      width: 250px;
    }

    .el-transfer-panel__body {
      height: 300px;
    }

    .el-transfer-panel__list.is-filterable {
      height: 250px;
    }

    .el-transfer__buttons {
      padding: 0 20px;
    }
  }

  .tabcontent {
    margin-top: 10px;
  }

  .addColorBtn {
    background-color: #ff7c24;
    border: 1px solid #ff8d3c;
  }


  .limits {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 60px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .line {
      height: 1px;
      background-color: #707070;
      margin-top: 30px;
    }
  }

  .block {
    display: block;
    width: 300px;
  }

  .warntip {
    margin-top: 20px;
  }

  .ml_10 {
    margin-left: 10px;
    color: red;
    margin-right: 5px;
  }

  .more-container {
    position: relative;
  }

  .backBtn {
    position: absolute;
    left: 20px;
    top: 19px;
    background-color: #fff;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #e4e7ed;
    padding-right: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
    }
  }
</style>
